<template>
  <div class="notifications_container">
    <div>
      <van-nav-bar :fixed="true" title="Notifications" @click-left="onClickLeft">
        <template #left>
          <van-icon :name="arrow" size="18" />
        </template>
      </van-nav-bar>
    </div>
    <div class="container">
      <div class="notice">
        <img src="../../../assets/images/user/notice.png" alt="notice">
      </div>
      <div class="title">Oops!</div>
      <div class="info">You don’t have any news yet.</div>
      <div class="info">The list is empty</div>
    </div>
  </div>
</template>

<script setup name='Notifications'>
import { reactive, ref, onMounted, defineEmits, defineProps, defineExpose } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import arrow from '@/assets/images/user/arrow.png'
import { userStore } from '@/store'

// 初始化仓库
const store = userStore()

// 变量区
const router = useRouter()
const route = useRoute()
const state = ref('')



// 代码区
const onClickLeft = () => {
  history.back()
  store.SET_PATH_DATA('yes')

}


onMounted(() => {

})

// 将组件中的数据进行暴露出去
defineExpose({

})
</script>

<style lang="scss" scoped>
.notifications_container {

  .container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    // margin-top: 50%;
    padding-top: 50%;
    .notice {
      width: 106px;
      height: 106px;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .title {
      font-size: 42px;
      color: #000;
      font-weight: 700;
      margin: 30px 0px;
    }

    .info {
      font-size: 25px;
      color: #A4A4A4;
    }
  }
}
</style>